<template>
  <div class="fixed-nav" 
  :style="{backgroundColor:'rgba(255,255,255,'+bgColor+')',boxShadow: bgColor != 0 ?'0 1px 4px 1px rgba(0,0,0,0.08)': 'none'}">
      <ul class="outer-container">
          <li>
              <img src="" alt="">
          </li>
          <li>
              <router-link to='/' :class="{active:active == 1}">首页</router-link>
              <router-link to='/diary' :class="{active:active == 2}">日记</router-link>
              <router-link to='/hospital' :class="{active:active == 3}">医院</router-link>
              <router-link to='/doctor' :class="{active:active == 4}">医生</router-link>
              <router-link to='/circle' :class="{active:active == 5}">圈子</router-link>
              <router-link to='/project' :class="{active:active == 6}">项目</router-link>
          </li>
          <li v-if="!loginState" class="login-reg">
              <router-link @click="togglePopup" to="">登录</router-link> | <router-link  to="">注册</router-link>
          </li>
          <li v-else>
              <router-link to="#"><img src="" alt=""></router-link>
          </li>
      </ul>
  </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex';
    export default{
        data(){
            return {
                active: 1,
                bgColor:0,
            }
        },
        watch:{
            '$route':'watchRouter'
        },
        created(){
            var timeout = null;
            window.onscroll = ()=>{
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
                if(scrollTop > 0){
                    if(this.bgColor == 1) return;
                    this.bgColor += 0.05;
                }else{
                    this.bgColor = 0;
                }
                if(timeout !== null) clearTimeout(timeout);
                // timeout = setTimeout(() => {
                //     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
                //     if(scrollTop > 0){
                //         if(this.bgColor == 1) return;
                //         this.bgColor += 0.3;
                //     }else{
                //         this.bgColor = 0;
                //     }
                //     console.log(this.bgColor);
                // }, 60);

            }
        },
        computed: mapState(['loginState']),
        methods:{
            ...mapMutations(['togglePopup']),
            watchRouter(){
                switch(this.$route.path) {
                    case '/':
                        this.active = 1;
                        break;
                    case /\/search/.test(this.$route.path)&&this.$route.path:
                        this.active = 8;
                        break;
                    case '/diary':
                        this.active = 2;
                        break;
                    case '/project':
                        this.active = 6;
                        break;
                    case '/hospital':
                        this.active = 3;
                        break;
                    case '/doctor':
                        this.active = 4;
                        break;
                    case '/circle':
                        this.active = 5;
                        break;
                    default:
                    	this.active = 999;
                }
            }
        },
        beforeDestroy(){
            window.onscroll = null;
        }
    }
</script>
<style lang='less' scoped>
    .fixed-nav{
        width: 100%;
        position: fixed;
        z-index: 5;
        top: 0;
       // box-shadow: 0 1px 4px 1px rgba(0,0,0,0.1);
        ul{
            overflow: hidden;
            li{
                line-height: 70px;
                float: left;
                font-size: 16px;

                &:last-child{
                    float: right;
                }
                &:nth-child(2){
                    margin-left: 300px;
                }
                a{
                    display: inline-block;
                    width: 60px;
                    text-align: center;
                    height: 30px;
                    line-height: 30px;
                    border-radius: 30px;
                    margin-right: 20px;
                    &.active{
                        background: #333;
                        color: #fff;
                    }
                }
                &.login-reg a{
                    font-size: 12px;
                    width: auto;
                    margin: 0;
                    cursor: pointer;
                }

            }
        }
    }
</style>
